<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        display: flex;
        margin: 50px auto;
        width: 400px;
        overflow: hidden;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 10px 10px 30px #bebebe, 10px -10px 30px #ffffff;
      }
      .text {
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        display: -webkit-box;
        /* 通过此处自定义行数 */
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        position: relative;
      }
      .exp {
        /* 复选框默认隐藏 */
        display: none;
      }
      /* 实现按钮切换 */
      .btn {
        margin-left: 10px;
        font-size: 16px;
        padding: 0 8px;
        line-height: 24px;
        color: #000;
        border-radius: 4px;
        background: #3f51b5;
        cursor: pointer;
      }
      .btn::before {
        content: "展开";
      }
      .exp:checked + .text .btn::before {
        content: "收起";
      }
      .btn {
        float: right;
        /* 清除浮动，让按钮下移 */
        clear: both;
      }
      /* 再浮动一个元素，动态计算高度，把按钮挤下去 */
      .text::before {
        content: "";
        height: calc(100% - 24px);
        float: right;
        /* width: 10px; */
        /* background-color: blue; */
      }
      .exp:checked + .text {
        -webkit-line-clamp: 999;
      }
      .text::after {
        content: "";
        width: 999vw;
        height: 999vw;
        position: absolute;
        box-shadow: inset calc(100px - 999vw)
        calc(30px - 999vw) 0 0 #fff;
        /* calc(30px - 999vw) 0 0 #000; */
        margin-left: -100px;
      }
      .exp:checked+.text::after {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <!-- 将来需要隐藏的复选框 (用于切换)-->
      <input id="exp" class="exp" type="checkbox" />
      <!-- 核心文本区域 -->
      <div class="text">
        <!-- 关联复选框 label 按钮 -->
        <label class="btn" for="exp"></label>
        令人脱发的代码说:
        css是前端学习的一个基础内容，也是相对具有趣味性的一部分，希望你能从中感受到编程的乐趣，获得一定收获。作品源码都在粉丝群里，欢迎加群分享交流技术。想免费学习的小白也欢迎私信我学习中的问题。
        <!-- 作品源码都在粉丝群里，欢迎加群分享交流技术。想免费学习的小白也欢迎私信我学习中的问题。 -->
      </div>
    </div>
  </body>
</html>
